<template>
	<view class="content">
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<uni-nav-bar left-icon="back" left-text="返回" title="操作"></uni-nav-bar>
		<view class="body">
			<view class="operate_item">
			</view>
			<view class="operate_item">
				<view class="item_top">
					<image src="../../static/patient_list/operate_title_img.png" class="operate_title_img"></image>
					<view class="top_title" v-if="from == 'schedule'">随访记录</view>
					<view class="top_title" v-if="from == 'medicine'">服药情况</view>
					<view class="position" @tap="getPosition()" v-if="from == 'schedule'">
						<image src="../../static/patient_list/position.png"></image>
						{{position}}
					</view>
				</view>
				<view class="item_body">
					<view class="pic_body" @tap="takePhoto()">
						<image src="../../static/patient_list/camera.png" class="camera"></image>
						<view class="photo_tips" v-if="from == 'schedule'">定位并拍照上传随访记录</view>
						<view class="photo_tips" v-if="from == 'medicine'">定位并拍照上传随访记录</view>
					</view>
					<view class="pic_list">
						<view class="imgs" v-for="(img,index) in RecordList" :key="index">
							<image :src="img" class="visitImg" v-if="RecordList.length != 0"></image>
							<image src="../../static/schedule_list/delete.png" class="delImg" @tap="delImg(img)"></image>
						</view>

					</view>
				</view>
			</view>
			<view class="submit"><button type="default" class="submit_btn" @tap="uploadImg()">完成操作</button></view>
		</view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools';
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				position: '',
				RecordList: [],
				array: ['请选择患者等级', 'A级', 'B级', 'C级', 'D级', 'E级'],
				index: 0,
				sid: '',
				latitude: '',
				longitude: '',
				from: '',
				imgData:[]
			};
		},
		created() {
			this.getPosition();
		},
		onLoad: function(option) {
			console.log("option:" + JSON.stringify(option));
			var info = JSON.parse(option.info);
			this.sid = info.sid;
			this.from = info.from;
			console.log('sid:' + this.sid);
		},
		methods: {
			delImg(img) {
				var index = this.RecordList.indexOf(img);
				console.log(index);
				if (index > -1) {
					this.RecordList.splice(index, 1);
				}
			},
			getPosition() {
				var _this = this;
				plus.geolocation.getCurrentPosition(
					function(position) {
						console.log('获取地点：' + JSON.stringify(position));
						_this.latitude = position.coords.latitude;
						_this.longitude = position.coords.longitude;
						_this.position = position.addresses;
						// _this.checkInAddress = position.addresses;
					},
					function(e) {
						console.log('Geolocation error: ' + e.message);
					}, {
						/* coordsType: 'bd09ll',
						provider:'baidu' */
					}
				);
			},
			takePhoto() {
				if (this.RecordList.length == 3) {
					uni.showToast({
						icon: 'none',
						title: "最多上传三张照片",
						duration: 3000
					})
				} else {
					uni.chooseImage({
						count: 3 - this.RecordList.length, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['camera', 'album'], //从相册选择
						success: res => {
							console.log(JSON.stringify(res.tempFilePaths));
							for (var i = 0; i < res.tempFilePaths.length; i++) {
								this.RecordList.push(res.tempFilePaths[i]);
							}
							console.log("visitLIst:" + this.RecordList[0]);
						}
					});
				}

			},
			//選擇等級
			bindPickerChange: function(e) {
				console.log("bindPickerChange: " + JSON.stringify(e));
				console.log('picker发送选择改变，携带值为：' + e.target.value);
				this.index = e.target.value;
			},
			base(base) {
				pathToBase64(base)
					.then(base64 => {
						console.log(base64);
						// this.postPhoto(base64);
					})
					.catch(error => {
						console.error(error);
					});
			},
			uploadImg() {
				console.log("上传文件")
				if(this.RecordList.length <3){
					uni.showToast({
						icon:'none',
						title:'至少上传三张照片',
						duration:3000
					})
				}else{
					var flag = 0;
					for (var i = 0; i < this.RecordList.length; i++) {
						uni.uploadFile({
							url: this.$api.server_base_url + this.$api.server_upload_img, //仅为示例，非真实的接口地址
							header: {
								"auth": uni.getStorageSync('token'),
								"Content-Type": "multipart/form-data"
							},
							filePath: this.RecordList[i],
							name: 'multipartFile',
							success: (uploadFileRes) => {
								flag++;
								console.log(uploadFileRes.data);
								var data = JSON.parse(uploadFileRes.data)
								this.imgData.push(data.data);
								console.log("imgData: " + this.imgData);
								this.visitCreate(flag);
							},
							
						});
					}
				}
			},
			visitCreate(flag) {
				console.log("start:"+flag);
				if(flag == this.RecordList.length){
					var json = new Object();
					json.visitSid = this.sid;
					json.x = JSON.stringify(this.longitude);
					json.y = JSON.stringify(this.latitude);
					json.place = this.position;
					json.imgs = this.imgData;
					this.$http.uniHttpPost(this.$api.server_create_visit, json).then(res => {
						console.log("server_create_visit: " + JSON.stringify(res));
						uni.showToast({
							icon: 'success',
							title: '操作成功！',
							complete() {
								uni.switchTab({
									url: './patient_list'
								})
							}
						})
					}).catch(err => {
						console.log("server_create_visit err: " + JSON.stringify(err));
					})
				}else{
					console.log("123123");
				}
			}
		}
	};
</script>

<style scoped>
	@import url('../../css/navigation.css');

	.content {
		display: flex;
		flex-direction: column;
		background-color: #f2f2f2;
		height: 100%;
	}

	.operate_item {
		display: flex;
		flex-direction: column;
		margin-top: 41.66upx;
		justify-content: center;
	}

	.item_top,
	.item_level {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.item_body {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.pic_body {
		margin-top: 10upx;
		border-radius: 27.77upx;
		background-color: rgb(255, 255, 255);
		height: 202.77upx;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.visitImg,
	.medicineImg {
		height: 202.77upx;
		width: 202.77upx;
		margin: 0 6.94upx;
	}

	.item_level {
		margin-left: 20.13upx;
		margin-right: 22.22upx;
		border-bottom: 1px solid rgba(0, 0, 0, 0.302);
		height: 83.33upx;
	}

	.top_title,
	.level_title {
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(0, 0, 0);
		font-weight: bold;
		margin-left: 10.41upx;
	}

	.top_title {
		flex: 1;
	}

	.level_title {
		margin-left: 15.91upx;
	}

	.operate_title_img {
		width: 5.55upx;
		height: 25.69upx;
		margin-left: 20.13upx;
	}

	.level_choose {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex: 1;
		height: 100%;
		margin-right: 50upx;
	}

	.more {
		margin-right: 0;
		width: 25upx;
		height: 25upx;
	}

	.level_input {
		margin-right: 34.72upx;
	}

	.level_content {
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgba(0, 0, 0, 0.302);
	}

	.position {
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(18, 204, 202);
		display: flex;
		align-items: center;
		margin-right: 22.22upx;
	}

	.position image {
		width: 22.22upx;
		height: 26.38upx;
	}

	.camera {
		width: 63.88upx;
		height: 48.61upx;
	}

	.photo_tips {
		margin-top: 10upx;
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(34, 212, 206);
	}

	.submit_btn {
		border-radius: 13.88upx;
		background-color: rgb(41, 209, 203);
		box-shadow: 1.08upx 6.15upx 31.94upx 0px rgba(64, 187, 186, 0.64);
		width: 587.5upx;
		height: 64.58upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25upx;
		font-family: 'FZLTHJW';
		color: rgb(255, 255, 255);
	}

	.pic_list {
		height: 202.77upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 20.83upx;
	}

	.delImg {
		height: 34.72upx;
		width: 34.72upx;
		position: relative;
		top: -185.41upx;
		left: -30.42upx;
	}
</style>
